<script lang="ts">
  import { createEventDispatcher } from "svelte"
  export let isAllCheckedStatus: boolean
  const dispatch = createEventDispatcher()
  const removeAllCheckedTodo = () => {
    dispatch("removeAllCheckedTodoEvent")
  }
  const allCheckStatusChange = () => {
    dispatch("allCheckStatusChangeEvent")
  }
</script>

<div class="bottom">
  <div>
    <input
      type="checkbox"
      name="allCheck"
      id="allCheck"
      value="allCheck"
      bind:checked={isAllCheckedStatus}
      on:change={allCheckStatusChange}
    />
    <label for="allCheck">全选</label>
  </div>
  <button on:click={removeAllCheckedTodo}>删除</button>
</div>

<style>
  .bottom {
    display: flex;
    margin-top: 30px;
    user-select: none;
  }
  button {
    margin-left: 50px;
  }
</style>
